<template>
	<view class="record">
		<u-navbar title="提现记录"></u-navbar>
		<view class="rheader">
			<view class="info u-flex u-row-around u-col-center">
				<view class="infoone">
					<view class="top">￥0</view>
					<view class="bot">累计提现</view>
				</view>
				<view class="lines"></view>
				<view class="infoone">
					<view class="top">￥0</view>
					<view class="bot">正在提现</view>
				</view>
			</view>
		</view>
		<view v-if="withdrawList.length" class="recordlist">
			<view class="date">
				<view class="u-flex u-row-left u-col-center">
					<text>本月</text>
					<u-icon name="arrow-down-fill" color="#000000" size="28"></u-icon>
				</view>
				<view class="">
					累计提现 ￥
					<text class="u-p-r-10">{{ allnum }}</text>
					正在提现 ￥
					<text>{{ nownum }}</text>
				</view>
			</view>
			<view class="recordul">
				<view class="recordli" v-for="(v, k) in withdrawList" :key="k">
					<view class="right u-flex u-row-left u-col-center">
						<view
							class="iconfont icon-qiandai"
							:style="{
								fontSize: '60rpx',
								marginRight: '26rpx',
								color: v.status === 3 ? '#8A8A8A' : '#F2682C'
							}"
						></view>
						<view class="u-flex-1">
							<view class="u-flex u-row-between u-col-center">
								<text class="title">余额提现</text>
								<text class="title">{{ v.price }}</text>
							</view>
							<view class="u-flex u-row-between u-col-center">
								<text class="tips">{{ v.time }}</text>
								<text
									class="tips"
									:style="{
										color: v.status === 1 ? '#F2682C' : v.status === 2 ? '#52C41A' : '#8A8A8A'
									}"
								>
									{{ v.status === 1 ? '正在提现' : v.status === 2 ? '提现成功' : '提现失败' }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center">
			<view class="" style="text-align: center;">
				<image src="../../../static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
				<view class="" style="color: #919191;">暂无提现记录</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script>
export default {
	name: 'record',
	data() {
		return {
			scrollTop: 0,
			allnum: '',
			nownum: '',
			withdrawList: [
				// {
				// 	time: '2021-01-12 11:50:30', // 时间
				// 	price: '10.00', //金额
				// 	status: 1 //提现状态（1正在提现，2提现成功，3提现失败）
				// }
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		this.getWithdrawalDetail();
	},
	onPageScroll(obj) {
		// console.log(obj);
		this.scrollTop = obj.scrollTop;
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		getWithdrawalDetail() {
			this.$u.api
				.getWithdrawalDetail()
				.then(res => {
					console.log(res);
					this.allnum = res.data.price;
					this.nownum = res.data.time_price;
					this.withdrawList.push(...res.data.info.data);
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.record {
	.rheader {
		margin: 14rpx 22rpx 0;
		.info {
			width: 100%;
			height: 160rpx;
			background-color: rgba(242, 104, 44, 0.81);
			box-shadow: 0px 4rpx 12rpx 0px rgba(242, 104, 44, 0.65);
			border-radius: 12rpx;
			.infoone {
				color: #fbfbfb;
				text-align: center;
				.top {
					font-size: 36rpx;
					font-weight: 600;
					margin-bottom: 8rpx;
				}
				.bot {
					font-size: 24rpx;
				}
			}
			.lines {
				width: 2rpx;
				height: 50%;
				background-color: #f5f5f5;
				border-radius: 10rpx;
			}
		}
	}
	.recordlist {
		margin: 28rpx;
		.date {
			margin-bottom: 10rpx;
		}
		.recordul {
			background-color: #ffffff;
			border-radius: 12rpx;
			.recordli {
				height: 134rpx;
				padding: 28rpx 40rpx 0;
				.right {
					border-bottom: 2rpx solid #f5f5f5;
					padding-bottom: 40rpx;
				}
			}
		}
	}
	.nodata {
		margin-top: 438rpx;
	}
}
</style>
